<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <input type="checkbox" />全选
    <div class="box">
      <input type="checkbox" />1 <br />
      <input type="checkbox" />2 <br />
      <input type="checkbox" />3 <br />
      <input type="checkbox" />4 <br />
    </div>
    <script>
      var inp = document.querySelector("input");
      var inps = document.querySelector(".box").querySelectorAll("input");
      //给全选框添加事件
      inp.onclick = function () {
        //循环4个小复选框，让4个小复选框的checked状态和全选框保持一致
        for (var i = 0; i < inps.length; i++) {
          inps[i].checked = this.checked;
        }
      };
      //给下面的每一个小复选框添加点击事件
      for (var i = 0; i < inps.length; i++) {
        inps[i].onclick = function () {
          //flag 控制全选按钮是否全部选中
          var flag = true;
          // 判断每个按钮是否被选中
          for (var i = 0; i < inps.length; i++) {
            //存在某个按钮没有被选中的情况，flag=flase;否则flag=true;
            if (!inps[i].checked) {
              flag = false;
              break;
            }
          }
          inp.checked = flag;
        };
      }
    </script>
  </body>
</html>
